<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>航拍</title>
  <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
  <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
  <script src="./libgif.js"></script>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
  <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

  <script type="text/javascript">

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
    const viewer = new Cesium.Viewer('map', {});
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(120, 31, 5000)
    });


    // 视锥体位置
    let qd = Cesium.Cartesian3.fromDegrees(120, 31, 1000);
    let zd = Cesium.Cartesian3.fromDegrees(120, 31, 0);

    const fov = 30;  //上下角度
    const near = 10;  // 进距离
    const far = 500;  //远距离
    const aspectRatio = 1.4;  //横向比例

    // 绘制
    addFrustum(
      qd,
      _getOrientation(qd, zd),
      fov,
      near,
      far,
      aspectRatio
    );

    // 创建视锥体及轮廓线
    function addFrustum(position, orientation, fov, near, far, aspectRatio) {
      let frustum = new Cesium.PerspectiveFrustum({
        fov: Cesium.Math.toRadians(fov),
        aspectRatio: aspectRatio,
        near: near,
        far: far,
      });
      let instanceGeo = new Cesium.GeometryInstance({
        geometry: new Cesium.FrustumGeometry({
          frustum: frustum,
          origin: position,
          orientation: orientation,
          vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            new Cesium.Color(1.0, 0.0, 0.0, 0.3)
          ),
        },
      });
      let instanceGeoLine = new Cesium.GeometryInstance({
        geometry: new Cesium.FrustumOutlineGeometry({
          frustum: frustum,
          origin: position,
          orientation: orientation,
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            new Cesium.Color(1.0, 1.0, 1.0, 1)
          ),
        },
      });


      let primitive = new Cesium.Primitive({
        geometryInstances: [instanceGeo],
        appearance: new Cesium.PerInstanceColorAppearance({
          closed: true,
          flat: true,
        }),
        asynchronous: false,
      });

      let primitive1 = new Cesium.Primitive({
        geometryInstances: [instanceGeoLine],
        appearance: new Cesium.PerInstanceColorAppearance({
          closed: true,
          flat: true,
        }),
        asynchronous: false,
      });
      viewer.scene.primitives.add(primitive);
      viewer.scene.primitives.add(primitive1);


      // --------------------------获取顶点坐标---------------------------------------------------------
      let zb = Cesium.FrustumOutlineGeometry.createGeometry(instanceGeo.geometry)
      const positions = zb.attributes.position.values;
      console.log(positions)

      const temp = [];
      for (let i = 0; i < positions.length; i += 3) {
        temp.push(positions.slice(i, i + 3));
      }
      console.log(temp)

      const result = [];
      temp.forEach(function (chunk) {
        result.push(latlng.formatPositon(new Cesium.Cartesian3(chunk[0], chunk[1], chunk[2])));
      });
      console.log(result)
      // --------------------------获取顶点坐标---------------------------------------------------------


    }

    function _getOrientation(cameraPosition, position) {
      var e = cameraPosition,
        t = position,
        i = Cesium.Cartesian3.normalize(
          Cesium.Cartesian3.subtract(t, e, new Cesium.Cartesian3()),
          new Cesium.Cartesian3()
        ),
        a = Cesium.Cartesian3.normalize(e, new Cesium.Cartesian3()),
        n = new Cesium.Camera(viewer.scene);
      (n.position = e),
        (n.direction = i),
        (n.up = a),
        (i = n.directionWC),
        (a = n.upWC);
      var r = n.rightWC,
        o = new Cesium.Cartesian3(),
        l = new Cesium.Matrix3(),
        u = new Cesium.Quaternion();
      r = Cesium.Cartesian3.negate(r, o);
      var d = l;
      Cesium.Matrix3.setColumn(d, 0, r, d),
        Cesium.Matrix3.setColumn(d, 1, a, d),
        Cesium.Matrix3.setColumn(d, 2, i, d);
      var c = Cesium.Quaternion.fromRotationMatrix(d, u);
      return (this.orientation = c), c;
    }
  </script>
</body>

</html>